<template>
  <div class="page-container">
    <!-- 导航按钮（与di4.vue样式一致） -->
    <navigator url="/pages/index/shou_ye/di6" class="nav-button">
      青春留声>>
    </navigator>

    <!-- 原图背景区域 - 自适应窗口 -->
    <div class="original-background"></div>

    <!-- 草绿色加长部分 - 包含所有内容 -->
    <div class="extended-background">
      <div class="content-wrapper">
        <h1 class="header">舌尖记忆</h1>
        <!-- 第一部分内容 -->
        <div class="section">
          <div class="card youth-economics">
            <h2>青春经济学</h2>
            <p>投资报告：成长型</p>
            <p>投入：24,680元</p>
            <p>收益：</p>
            <ul>
              <li>图书馆咖啡厅消费 18 次</li>
              <li>银桦窗口消费 192 次</li>
              <li>学子轻食消费 9 次</li>
            </ul>
            <p>这是性价比最高的 青春味觉基金！</p>
          </div>
        </div>

        <!-- 第二部分内容 -->
        <div class="section">
          <div class="card taste-point">
            <h2>味觉地理新记点</h2>
            <table>
              <thead>
              <tr>
                <th>地点名称</th>
                <th>总金额</th>
                <th>占比</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>银桦轻食</td>
                <td>¥3,850</td>
                <td>31%</td>
              </tr>
              <tr>
                <td>图书馆咖啡厅</td>
                <td>¥3,850</td>
                <td>31%</td>
              </tr>
              <tr>
                <td>桂苑烧烤涮肉</td>
                <td>¥3,850</td>
                <td>31%</td>
              </tr>
              <tr>
                <td>家园铁板厨房</td>
                <td>¥3,850</td>
                <td>31%</td>
              </tr>
              <tr>
                <td>学子轻食</td>
                <td>¥3,850</td>
                <td>31%</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 第三部分内容 -->
        <div class="section">
          <div class="card fund-point">
            <h2>经费包的相变临界点</h2>
            <div class="chart">
              <p>学期消费金额</p>
              <div class="line-chart">
                <div class="axis-x">
                  <span>大一上</span>
                  <span>大一下</span>
                  <span>大二上</span>
                  <span>大二下</span>
                  <span>大三上</span>
                  <span>大三下</span>
                  <span>大四上</span>
                  <span>大四下</span>
                </div>
                <div class="axis-y">
                  <span>7.0k</span>
                  <span>6.5k</span>
                  <span>6.0k</span>
                  <span>5.5k</span>
                  <span>5.0k</span>
                  <span>4.5k</span>
                  <span>4.0k</span>
                  <span>3.5k</span>
                  <span>3.0k</span>
                  <span>2.5k</span>
                  <span>2.0k</span>
                </div>
                <div class="line"></div>
              </div>
            </div>
            <p>成电芯伙伴提供技术支持 - 数据仅供参考</p>
          </div>
        </div>

        <!-- 第四部分内容 -->
        <div class="section">
          <div class="card consumption-trends">
            <h2>消费趋势分析</h2>
            <p>基于四年消费数据的深度解析</p>
            <div class="trend-analysis">
              <div class="trend-item">
                <h3>季节性波动</h3>
                <p>每年9月和3月为消费高峰期，对应新学期开学和返校季</p>
              </div>
              <div class="trend-item">
                <h3>品类偏好</h3>
                <p>从轻食到正餐的消费比例为6:4，体现健康饮食倾向</p>
              </div>
              <div class="trend-item">
                <h3>社交消费</h3>
                <p>约38%的消费为多人同行，集中在周五和周六</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 第五部分内容 -->
        <div class="section">
          <div class="card future-forecast">
            <h2>未来消费预测</h2>
            <p>基于历史数据的毕业季消费趋势预测</p>
            <ul>
              <li>毕业设计期间：咖啡消费预计增长40%</li>
              <li>毕业季聚餐：预计产生12次集体消费</li>
              <li>离校前一周：怀旧性地点消费频率增加</li>
            </ul>
            <p>总预计：毕业季将产生约3,200元额外消费</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

const handleResize = () => {
  const originalBg = document.querySelector('.original-background');
  if (originalBg) {
    // 移除强制背景高度不小于窗口高度的逻辑，避免图片拉伸
    const imgRatio = 1.3; // 根据实际图片宽高比调整（例如16:9图片使用1.777）
    const windowWidth = window.innerWidth;
    const calculatedHeight = windowWidth / imgRatio;
    originalBg.style.height = `${calculatedHeight}px`; // 仅按比例计算高度
  }
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
  handleResize();
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-container {
  width: 100%;
  overflow-x: hidden;
  position: relative; /* 新增：为按钮绝对定位提供容器 */
}

/* 导航按钮样式（与di4.vue完全一致） */
.nav-button {
  width: 200rpx;
  height: 80rpx;
  background-color: #043cf3;
  color: white;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  text-decoration: none;
  z-index: 10; /* 确保按钮在背景图上方 */
}

/* 原图背景区域 - 自适应窗口 */
.original-background {
  width: 100%;
  background-image: url("static/tp/L1.png");
  background-size: contain; /* 改为contain确保图片完整显示 */
  background-position: center top; /* 顶部居中显示 */
  background-repeat: no-repeat;
  transition: height 0.3s ease;
}

/* 草绿色加长部分 - 内容布局保持不变 */
.extended-background {
  width: 100%;
  background-color: #a5ef6f; /* 草绿色 */
  padding: 20px 0;
}

/* 内容容器及所有内容样式保持不变 */
.content-wrapper {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.header {
  text-align: center;
  color: #9e9c80;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  margin-bottom: 50px;
  padding: 20px;
}

.section {
  margin-bottom: 50px;
}

.card {
  background-color: rgba(92, 131, 147, 0.9);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card h2 {
  color: #2c3e50;
  border-bottom: 2px solid #4A7729;
  padding-bottom: 10px;
  margin-top: 0;
}

.youth-economics ul {
  list-style-type: disc;
  margin-left: 20px;
  line-height: 1.6;
}

.taste-point table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.taste-point th,
.taste-point td {
  border: 1px solid #9c5c5c;
  padding: 12px;
  text-align: left;
}

.taste-point th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.taste-point tr:nth-child(even) {
  background-color: #f9f9f9;
}

.fund-point .chart {
  margin: 20px 0;
}

.line-chart {
  position: relative;
  height: 300px;
  width: 100%;
  border: 1px solid #ddd;
  margin-top: 10px;
  background-color: white;
}

.axis-x {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  padding: 5px 0;
}

.axis-y {
  position: absolute;
  left: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 12px;
  padding: 0 5px;
}

.line {
  position: absolute;
  top: 50px;
  left: 50px;
  width: calc(100% - 100px);
  height: 2px;
  background-color: #4A7729;
}

.trend-analysis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.trend-item {
  background-color: rgba(245, 245, 245, 0.8);
  padding: 15px;
  border-radius: 8px;
}

.future-forecast ul {
  margin-left: 20px;
  line-height: 1.8;
  margin-top: 15px;
}

/* 响应式调整保持不变 */
@media (max-width: 768px) {
  .header {
    font-size: 2rem;
    padding: 15px;
  }

  .card {
    padding: 15px;
  }

  .taste-point th,
  .taste-point td {
    padding: 8px;
    font-size: 0.9rem;
  }

  .line-chart {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .header {
    font-size: 1.8rem;
  }

  .content-wrapper {
    padding: 0 10px;
  }
}
</style>